<template>
  <view>

    <uni-forms style="margin: 12px;" ref="form"  :modelValue="baseFormData" label-position="top" label-width="120px" >
      <uni-forms-item label="留校原因" required >
        <uni-easyinput v-model="baseFormData.reason" type="textarea" placeholder="请输入留校原因" />
      </uni-forms-item>
      <uni-forms-item label="留校开始时间" required >
        <uni-easyinput v-model="baseFormData.begintime" placeholder="2024/01/03  00:00:00" />
      </uni-forms-item>
      <uni-forms-item label="留校结束时间" required >
        <uni-easyinput v-model="baseFormData.endtime" placeholder="请输入留校结束时间" />
      </uni-forms-item>
      <uni-forms-item label="家庭联系人姓名" required >
        <uni-easyinput v-model="baseFormData.name" placeholder="请输入家庭联系人姓名" />
      </uni-forms-item>
      <uni-forms-item label="家庭联系人电话" required>
        <uni-easyinput v-model="baseFormData.tel"  placeholder="请输入家庭联系人电话" />
      </uni-forms-item>
      <uni-forms-item label="是否需要校内住宿" required>
        <uni-data-checkbox v-model="baseFormData.opt" :localdata="opts" />
      </uni-forms-item>
      <uni-forms-item label="校外住宿地址" required>
        <uni-data-picker placeholder="请选择省市区" :localdata="range" v-model="baseFormData.address">
        </uni-data-picker>
        <uni-easyinput   placeholder="详细地址" />
      </uni-forms-item>

      <view class="bu1">
        <button type="primary" @click="toindex()">
            <text class="zi1">确认申请</text></button>
      </view>
        <view class="bu2">
            <button @click="toindex()">
                <text class="zi2">
                    再想想
                </text></button>
        </view>
    </uni-forms>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
const form = ref()
let toindex = function(){
  uni.switchTab({
    url:"/pages/index/index"
  })
}

const baseFormData = reactive({
  reason: '',
  begintime:'',
  endtime:'',
  name:'',
  tel: '',
  address: '',
  opt: 1,
})
const opts =ref([

  {
    text: '需要',
    value: 0
  }, {
    text: '不需要',
    value: 1
  }
])
const range =ref(

    [{
      text: "山西省",
      value: "1-0",
      children: [
        {
          text: "太原市",
          value: "1-1",
          children:[
            {
              text: "尖草坪区",
              value: "1-1-1"
            },
            {
              text: "小店区",
              value: "1-1-2"
            },
          ]
        },
        {
          text: "临汾市",
          value: "1-2",
          children:[
            {
              text: "尧都",
              value: "1-2-1"
            },
            {
              text: "段乡县",
              value: "1-2-2"
            },
          ]
        },

      ]
    },
      {
        text: "河南省",
        value: "2-0",
        children: [{
          text: "郑州市",
          value: "2-1",
          children:[
            {
              text: "二七区",
              value: "2-1-1"
            },
            {
              text: "金水区",
              value: "2-1-2"
            },
          ]
        },
          {
            text: "洛阳市",
            value: "2-2",
            children:[
              {
                text: "八里堂",
                value: "2-1-1"
              },
              {
                text: "二郎庙",
                value: "2-2-2"
              },
            ]
          }]
      },
      {
        text: "山东省",
        value: "3-0",
        children: [{
          text: "济南市",
          value: "3-1"
        },
          {
            text: "青岛市",
            value: "3-2"
          }]
      }
    ])

</script>

<style scoped>
.bu1{
    display: block;
    text-align: center;
    line-height: 40px;
    width: 95%;
    height: 40px;
    background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
    border-radius: 4px;
    margin-left: 12px;
    margin-top: 12px;
}
.bu2{
    display: block;
    text-align: center;
    line-height: 40px;
    width: 95%;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #1277FF;
    border-radius: 4px;
    margin-left: 12px;
    margin-top: 16px;
}
.zi1{
    width: 60px;
    height: 21px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 40px;
}
.zi2{
    width: 45px;
    height: 21px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 15px;
    color: #006DFF;
    line-height: 40px;
}
</style>